<template>
  <div>
    <p class="title">
      <i></i>
      当前城市:{{city}}
    </p>
    <div id="provinceMap"></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    city: {
      type: String,
      default: ''
    }
  },
  mounted () {
    axios.get('http://iwenwiki.com/wapicovid19/all.php').then((res) => {
      if (res.status === 200) {
        const provinceList = []
        res.data.retdata.forEach((item) => {
          if (this.city === item.xArea) {
            for (let i = 0; i < item.subList.length; i++) {
              const temp = {
                name: item.subList[i].city + '市',
                value: item.subList[i].confirm
              }
              provinceList.push(temp)
            }
            this.$charts.provinceMap('provinceMap', item.xArea, provinceList)
          }
        })
      }
    })
  }
}
</script>

<style lang='scss' scoped>
#provinceMap {
  width: 375px;
  height: 400px;
}
  .title {
    padding: 16px;
    font-size: 17px;
    i {
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #4169e2;
      margin-right: 3px;
      vertical-align: middle;
    }
  }

</style>
